<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>华康财富后台管理系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <%@include file="../../comjs.jsp" %>

    <link href="<%=basePath%>css/vue.css?_v=<%=versions%>" type="text/css" rel="stylesheet"/>

</head>
<body>

<form class="com-addForm" id="com-addForm" action="javascript:void(0)" method="post" name="searchModForm">

    <div id="ProductCoupon">
        <label>
            产品名称: <strong>{{productName}} </strong>
        </label>

        <label>
            产品ID: {{productId}}
        </label>

        <br>

        <p>
            <input v-model="filter" placeholder="请填写卡券名称" class="com-inp"/>
            <button v-on:click="loadAll" class="btn btn-primary btn-xs">筛选</button>
            <button v-on:click="save" class="btn btn-success btn-xs">保存更新</button>
        </p>
        <br>

        <div style="height:350px; overflow:scroll;">
            <table class="table table-hover table-striped table-bordered ">
                <tr>
                    <td style="width: 50%">可选卡券</td>
                    <td style="width: 50%">已选卡券</td>
                </tr>
                <tr>
                    <td>
                        <add-button v-for="coupon in coupons"
                                    v-bind:coupon="coupon"
                                    :key="coupon.cardid"
                                    v-on:addcoupon="addSelectCoupon(coupon)">
                        </add-button>
                    </td>
                    <td>
                        <remove-button v-for="coupon in selectCoupons"
                                       v-bind:coupon="coupon"
                                       :key="coupon.cardid"
                                       v-on:removecoupon="removeSelectCoupon(coupon)">
                        </remove-button>
                    </td>
                </tr>
            </table>
        </div>

        <br>
        <transition name="bounce">
            <p v-if="show">
                <label v-bind:class="[alertClass, isAlert ? alertClassWarn:alertClassSucc]"
                       style="width: 100%">
                    <strong>{{msg}} </strong>
                </label>
            </p>
        </transition>

    </div>

</form>


<%--<script src="https://unpkg.com/vue/dist/vue.js"></script>--%>
<%--<script src="https://unpkg.com/vue-resource@1.2.1/dist/vue-resource.min.js"></script>--%>

<script type="text/javascript"
        src="<%=basePath%>js/vue/vue.min.js"></script>

<script type="text/javascript"
        src="<%=basePath%>js/vue/vue-resource.min.js"></script>

<script type="text/javascript"
        src="<%=basePath%>mgr/product/productType02/productCoupon.js?_v=<%=versions%>"></script>


</body>
</html>